import {computed, CSSProperties, designPage, iHTMLDivElement, reactive, useRefs} from "@peryl/react-compose";
import {buildAssetsPath} from "../../common/buildAssetsPath";
import {Button, PageCard, PageCardContent, Space} from "plain-design";
import './demo-path-animation-page.scss';

export default designPage(() => {

  const { refs, onRef } = useRefs({ container: iHTMLDivElement });

  const imagePath = buildAssetsPath('images/demo/path.png');
  const targetPath = buildAssetsPath('images/demo/path_target.png');

  const points: { x: number, y: number }[] = [
    { "x": 9.624, "y": 31.978 },
    { "x": 17.21, "y": 21.32 },
    { "x": 29.15, "y": 11.95 },
    { "x": 39.24, "y": 24.23 },
    { "x": 46.83, "y": 38.76 },
    { "x": 59.13, "y": 35.21 },
    { "x": 70.24, "y": 21.48 },
    { "x": 81.9, "y": 28.75 },
    { "x": 84.58, "y": 48.29 },
    { "x": 71.72, "y": 57.17 },
    { "x": 60.06, "y": 70.58 },
    { "x": 45.72, "y": 69.29 },
    { "x": 33.13, "y": 57.17 }
  ];

  const state = reactive({
    current: 0,
    pointX: points[0].x,
    pointY: points[0].y,
  });

  const handler = {
    /*onMousedown: (e: iMouseEvent) => {
      e.stopPropagation();
      e.preventDefault();
      const { effects: draggierEffects } = createEffects();
      draggierEffects.push(addWindowListener('mousemove', (e) => {
        e.stopPropagation();
        e.preventDefault();

        const containerRect = refs.container!.getBoundingClientRect();
        const { clientY, clientX } = e;
        const pointX = (clientX - containerRect.x) / containerRect.width * 100;
        const pointY = (clientY - containerRect.y) / containerRect.height * 100;
        state.pointX = Number(pointX.toFixed(2));
        state.pointY = Number(pointY.toFixed(2));
        console.log(state.pointX, state.pointY);
      }));
      draggierEffects.push(addWindowListener('mouseup', draggierEffects.clear));
    },
    record: () => {
      points.push({ x: state.pointX, y: state.pointY });
    },
    print: () => {
      console.log(JSON.stringify(points, null, 2));
    },*/
    next: () => {
      state.current = Math.min(points.length - 1, state.current + 1);
    },
    prev: () => {
      state.current = Math.max(0, state.current - 1);
    },
  };

  /*const styles = computed(() => {
    const style: CSSProperties = {};
    style.top = state.pointY + '%';
    style.left = state.pointX + '%';
    return style;
  });*/
  const styles = computed(() => {
    const style: CSSProperties = {};
    style.top = points[state.current].y + '%';
    style.left = points[state.current].x + '%';
    return style;
  });

  return () => (
    <>
      <PageCard className="demo-path-animation-page">
        <PageCardContent>
          <div
            className="image-container"
            ref={onRef.container}
            /*onMouseDown={handler.onMousedown}*/
          >
            <img src={imagePath} width="100%" className="image-background"/>
            <img src={targetPath} className="image-target" style={styles.value}/>
          </div>
        </PageCardContent>
        <PageCardContent>
          <Space style={{ justifyContent: 'center' }}>
            <Button mode="fill" onClick={handler.prev}>上一步</Button>
            <Button mode="fill" onClick={handler.next}>下一步</Button>
            {/*<Button mode="fill" onClick={handler.record}>记录点位</Button>*/}
            {/*<Button mode="fill" onClick={handler.print}>打印点位</Button>*/}
          </Space>
        </PageCardContent>
      </PageCard>
    </>
  );
});
